<template>
	<view>
		<u-cell-group :customStyle="{'fontSize': '12px'}">
			<u-cell v-for="(item,index) in list" :title="item.title" :key="index" :url="item.url" :size="'mini'" isLink>
			</u-cell>
		</u-cell-group>
		<!-- <view class="test" 
		   @touchstart.stop.prevent.capture="start($event)"
		   @touchmove.stop.prevent.capture="move($event)"
		   @touchend.stop.prevent.capture="end"
		   :style="{ 
			   'transform': 'translate(' + x + 'px,' + y + 'px) translateZ(0)'
			}">
			拖动
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: "仿探探左右滑动效果",
					url: "/pages/tantan/index"
				}],
				title: '本项目将JQ插件库与其他插件作为一个整合展示',
				startX: 0,
				startY: 0,
				moveX: 0,
				moveY: 0,
				endX: 0,
				endY: 0,
				x: 0,
				y: 0
			}
		},
		onLoad() {

		},
		methods: {
			go(url) {
				this.$u.route({
					url: url,
				})
			},
			start(e) {
				var touch = e.touches[0]
				this.startX = touch.pageX
				this.startY = touch.pageY
			},
			move(e) {
				var touch = e.touches[0]
				this.moveX = Math.floor(touch.pageX - this.startX)
				this.moveY = Math.floor(touch.pageY - this.startY)

				this.x = this.moveX + parseInt(this.endX, 10)
				this.y = this.moveY + parseInt(this.endY, 10)
			},
			end(e) {
				this.endX = this.x
				this.endY = this.y
			}
		}
	}
</script>

<style>
	.test {
		width: 200rpx;
		height: 200rpx;
		background-color: #1e58bf;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		font-size: 28rpx;
		color: #fff;
		line-height: 200rpx;
		text-align: center;
		will-change: transform;
	}
</style>
